1import {useState, useReducer, PropsWithChildren} from 'react';
  2import {makeStyles} from '@material-ui/core/styles';
  3import {useTranslation} from 'react-i18next';
  4import EventLayout, {TabComponent} from '../../../layouts/Event';
  5import TravelColumns from '../../../containers/TravelColumns';
  6import NewTravelDialog from '../../../containers/NewTravelDialog';
  7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  8import {
  9  EventByUuidDocument,
 10  FindUserVehiclesDocument,
 11  useFindUserVehiclesQuery,
 12} from '../../../generated/graphql';
 13import Fab from '../../../containers/Fab';
 14import pageUtils from '../../../lib/pageUtils';
 15import {getSession, useSession} from 'next-auth/react';
 16
 17interface Props {
 18  eventUUID: string;
 19}
 20
 21const Page = (props: PropsWithChildren<Props>) => {
 22  return <EventLayout {...props} Tab={TravelsTab} />;
 23};
 24
 25const TravelsTab: TabComponent = (props: {event}) => {
 26  const classes = useStyles();
 27  const {t} = useTranslation();
 28  const session = useSession();
 29  const isAuthenticated = session.status === 'authenticated';
 30  const {data} = useFindUserVehiclesQuery({
 31    skip: !isAuthenticated,
 32  });
 33  const vehicles = data?.me?.profile?.vehicles?.data || [];
 34  const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
 35  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 36
 37  const addTravelClickHandler =
 38    isAuthenticated && vehicles?.length != 0
 39      ? toggleVehicleChoice
 40      : () => toggleNewTravel({opened: true});
 41
 42  return (
 43    <>
 44      <TravelColumns toggle={addTravelClickHandler} />
 45      <Fab
 46        onClick={addTravelClickHandler}
 47        aria-label="add-car"
 48        color="primary"
 49        className={classes.bottomRight}
 50      >
 51        {t('travel.creation.title')}
 52      </Fab>
 53      <NewTravelDialog
 54        context={openNewTravelContext}
 55        toggle={() => toggleNewTravel({opened: false})}
 56      />
 57      <VehicleChoiceDialog
 58        open={openVehicleChoice}
 59        toggle={toggleVehicleChoice}
 60        toggleNewTravel={toggleNewTravel}
 61        vehicles={vehicles}
 62      />
 63    </>
 64  );
 65};
 66
 67const useStyles = makeStyles(theme => ({
 68  bottomRight: {
 69    bottom: 0,
 70    right: theme.spacing(6),
 71
 72    [theme.breakpoints.down('sm')]: {
 73      right: theme.spacing(1),
 74      bottom: 56,
 75    },
 76  },
 77}));
 78
 79export const getServerSideProps = pageUtils.getServerSideProps(
 80  async (context, apolloClient) => {
 81    const {uuid} = context.query;
 82    const {host = ''} = context.req.headers;
 83    const session = await getSession(context);
 84
 85    // Fetch event
 86    const {data} = await apolloClient.query({
 87      query: EventByUuidDocument,
 88      variables: {uuid},
 89    });
 90    const event = data?.eventByUUID?.data;
 91
 92    // Fetch user vehicles
 93    if (session)
 94      await apolloClient.query({
 95        query: FindUserVehiclesDocument,
 96      });
 97
 98    return {
 99      eventUUID: uuid,
100      metas: {
101        title: event?.attributes?.name || '',
102        url: `https://${host}${context.resolvedUrl}`,
103      },
104    };
105  }
106);
107
108export default Page;